<!--
 * @Author: linzaifei 1609781601@qq.com
 * @Date: 2025-05-26 09:16:44
 * @LastEditors: linzaifei 1609781601@qq.com
 * @LastEditTime: 2025-08-15 13:16:02
 * @FilePath: /vue3-cesium-plus/src/components/control/vc-search.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="vc-search" :style="positionStyle" >

       

        <el-tooltip
          effect="dark"
          content="搜索地址"
          placement="bottom"
        >
        <el-button type="primary" 
        :class="{ 'is-active': showSearch }"
        class="vc-search__button"  @click="showSearch = !showSearch">
          <img src="../../assets/svg/search.svg" alt="" srcset="">
        </el-button>
        </el-tooltip>
        <Transition name="slide">
          <div class="vc-search__input" v-if="showSearch">
            <el-autocomplete
                v-model="keywords"
                :fetch-suggestions="querySearchAsync"
                placeholder="请搜索地址"
                @select="handleSelect"
            />
          </div>
        </Transition>
    </div>
  </template>
  
<script setup lang="ts">
import { ref} from 'vue';
import{ positionProps, usePosition } from '../composables/usePosition'
// import { Search } from '@element-plus/icons-vue'
import {getTips} from '@/api/amap'


const showSearch = ref(false)
const keywords = ref('')
const links = ref([ { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'element', link: 'https://github.com/ElemeFE/element' },
    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },])

const props = defineProps({
    ...positionProps,
    data: {
      type: Object,
      default: () => {}
    }
  })
  const { positionStyle } = usePosition(props)


  let timeout: ReturnType<typeof setTimeout>
const querySearchAsync = (queryString: string, cb: (arg: any) => void) => {
  // const results = queryString
  //   ? links.value.filter(createFilter(queryString))
  //   : links.value

  getTips({keywords:queryString}).then((res)=>{
    console.log("-------",res)
  })

  clearTimeout(timeout)
  timeout = setTimeout(() => {
    cb(links.value)
  }, 3000 * Math.random())
}


const handleSelect = (item: Record<string, any>) => {
  console.log(item)
}





</script>
  
<style scoped lang="scss">
  .vc-search {
    position: absolute;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .el-button{
      width: 34px;
      height: 34px;
    }
    &__input{
        height: 34px;
        display: flex;
        align-items: center;
        background-color: var(--color-white);
        width: 200px;
        border-top-right-radius: var(--border-radius-xs);
        border-bottom-right-radius: var(--border-radius-xs);
        overflow: hidden;
    }
    &__button{
        color: var(--color-21);
        background-color: #fff;
        cursor: pointer;
        padding: var(--padding);
        border-top-right-radius: var(--border-radius-xs);
        border-bottom-right-radius: var(--border-radius-xs);
        transition: all 0.3s ease;
        
        &.is-active {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
    }
    :deep(.el-input__wrapper){
      box-shadow: none;
    }
  }
  
  .slide-enter-active,
  .slide-leave-active {
    transition: all 0.3s ease;
  }
  
  .slide-enter-from,
  .slide-leave-to {
    opacity: 0;
    width: 0;
  }
  
  .slide-enter-to,
  .slide-leave-from {
    opacity: 1;
    width: 200px;
  }
  </style>